<template>
  <div class="read-home-container" ref="list" @scroll="alive">
    <!-- 在组件上添加点击事件，需要使用native穿透,穿透到底层的元素上，就可以使用了 -->

    <header-search @click.native="onHeaderClick"></header-search>
    <!--  -->
    <h1>
      <template v-if="!this.$route.params.list">
        {{ getDetaultAddress[0].name }}
        {{ getDetaultAddress[0].address }}
      </template>
      <template v-else>
        {{ this.$route.params.list && this.$route.params.list.name }} :
        {{ this.$route.params.list && this.$route.params.list.address }}
      </template>
    </h1>
    <van-button @click="$router.push('/addressList')">
      进入地址管理页面
    </van-button>
    <!--  -->
    <div class="read-home-list">
      <template v-for="item in bookList">
        <BookCard :key="item.id" :item="item"></BookCard>
      </template>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState, mapGetters } from 'vuex'
import HeaderSearch from '../components/HeaderSearch.vue'
import BookCard from '../components/BookCard.vue'
export default {
  name: 'readHome',
  components: {
    HeaderSearch,
    BookCard,
  },
  created() {
    this.FetchBookList().then((res) => {
      this.SET_INIT_COMPARE_BOOKLIST()
    })
  },
  activated() {
    console.log(this.chooseId, 'chooseId')

    this.SET_INIT_COMPARE_BOOKLIST()
    this.$refs.list.scrollTop = this.scrollPages
  },
  computed: {
    ...mapState(['bookList', 'chooseId']),
    ...mapGetters(['getDetaultAddress']),
  },
  methods: {
    ...mapMutations(['SET_INIT_COMPARE_BOOKLIST']),
    ...mapActions(['FetchBookList']),
    alive(e) {
      this.scrollPages = e.target.scrollTop
    },
    onHeaderClick() {
      this.$router.push('/search')
    },
  },
}
</script>

<style lang="scss">
.read-home-container {
  height: 100%;
  overflow: auto;
}
.read-home-list {
  padding: 10px;
}
</style>
